<template>
  <el-button
    class="commonBut saveBtn funComBut"
    icon="icon iconfont icondaochu"
    v-sdc
    :loading="isLoading"
    @click="exportList"
  >
    <span class="opetareText">{{ btnText }}</span>
  </el-button>
</template>
<script>
import common from '../../kits/common'
export default {
  props: {
    btnText: {
      type: String,
      default: '导出',
    },
    dataLen: {
      type: Number,
      default: function () {
        return 0
      },
    },
    api: {
      type: String,
      default: function () {
        return ''
      },
    },
    filterField: {
      type: Object,
      default: function () {
        return {}
      },
    },
    responseType: {
      type: String,
      default: function () {
        return ''
      },
    },
  },
  data() {
    return {
      isLoading: false,
    }
  },
  methods: {
    exportList() {
      //console.log("table length = " + this.dataLen + " || api = "+this.api);
      //console.log(this.filterField);
      if (this.dataLen > 0) {
        if (this.responseType == 'get') {
          this.dowlandFile1(this.api, this.filterField)
        } else {
          this.dowlandFile2(this.api, this.filterField)
        }
      } else {
        this.$message({
          type: 'error',
          message: '无数据导出',
        })
      }
    },
    dowlandFile1(url, data) {
      let exportStr = url
      Object.keys(data).forEach(function (key, index) {
        // console.log(key,data[key]);
        if (index == 0) {
          exportStr += '?' + key + '=' + data[key]
        } else {
          exportStr += '&' + key + '=' + data[key]
        }
      })
      exportStr += '&access_token=' + localStorage.getItem('access_token')
      // console.log(exportStr);
      window.location.href = common.commonApi + exportStr
    },
    dowlandFile2(url, data) {
      this.isLoading = true
      this.axios({
        method: 'post',
        responseType: 'blob',
        url: url,
        data: data,
      })
        .then((response) => {
          this.isLoading = false
          // 提取文件名
          let condis = response.headers['content-disposition']
          let timestamp = new Date().getTime()
          let fileName = timestamp + '.xls'
          if (condis) {
            fileName = condis.match(/filename=(.*)/)[1]
          }
          // 将二进制流转为blob
          const blob = new Blob([response.data], {
            type: 'application/octet-stream',
          })
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
            window.navigator.msSaveBlob(blob, decodeURI(fileName))
          } else {
            // 创建新的URL并指向File对象或者Blob对象的地址
            const blobURL = window.URL.createObjectURL(blob)
            // 创建a标签，用于跳转至下载链接
            const tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = blobURL
            tempLink.setAttribute('download', decodeURI(fileName))
            // 兼容：某些浏览器不支持HTML5的download属性
            if (typeof tempLink.download === 'undefined') {
              tempLink.setAttribute('target', '_blank')
            }
            // 挂载a标签
            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
            // 释放blob URL地址
            window.URL.revokeObjectURL(blobURL)
          }
        })
        .catch((error) => {
          this.isLoading = false
          this.$message({
            type: 'error',
            message: error.message,
          })
        })
    },
  },
}
</script>
<style scoped lang="less"></style>
